<template>
    <div id="home">
        <Header></Header>
        <div id="mainviews">
            <div id="main-left">
                <Sider></Sider>
            </div>
            <div id="main-right">
                <Main></Main>
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from "@/MainViews/Header.vue";
import Sider from "@/MainViews/Sider.vue";
import Main from "@/MainViews/Main.vue";
</script>

<style>
#mainviews{
    display: flex;
}
#main-left{
    margin: 10px;
    width: 280px;
    height: 840px;
    border: 1.5px solid white;
    border-radius: 25px;
    overflow: hidden;
}
#main-right{
    margin: 10px;
    width: 900px;
    height: 840px;
    border: 1.5px solid white;
    border-radius: 25px;
    overflow: hidden;
}
</style>